<template>
  <el-form ref="user" :model="user" :rules="rules" label-width="80px">
    <el-row style="background-color: #e9e9eb; border-radius: 10px; padding: 15px;">
      <el-col :span="4">
        <el-form-item label="用户名">
          <el-input v-model="user.username" disabled></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="user.email" placeholder="邮箱"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" placeholder="密码"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row style="background-color: #e9e9eb; border-radius: 10px; padding: 15px; margin-top: 15px;">
      <el-col :span="8">
        <el-form-item label="聚推客" prop="apiKey">
          <el-input v-model="user.apiKey" placeholder="聚推客apiKey"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="聚推客" prop="pubId">
          <el-input v-model="user.pubId" placeholder="数值类型聚推客pubId"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row style="background-color: #e9e9eb; border-radius: 10px; padding: 15px; margin-top: 15px;">
      <el-col :span="6">
        <el-form-item label="小程序" prop="appId">
          <el-input v-model="user.appId" placeholder="请输入小程序appId"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="小程序" prop="appSecret">
          <el-input v-model="user.appSecret" placeholder="请输入小程序appSecret"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row style="background-color: #e9e9eb; border-radius: 10px; padding: 15px; margin-top: 15px;">
      <el-col :span="6">
        <el-form-item label="可分配佣金率" label-width="150px" prop="distRate">
          <el-input v-model="user.distRate" placeholder="请输入可分配佣金率"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="队员佣金率" label-width="150px" prop="teamRate">
          <el-input v-model="user.teamRate" placeholder="请输入队员佣金率"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row style="background-color: #fde2e2; border-radius: 10px; padding: 15px; margin-top: 15px;">
      <el-col :span="12">
        <span>可分配佣金率：该项是您想要从总佣金中取一定比率的佣金用来给别人发放</span>
      </el-col>
      <el-col :span="12">
        <span>队员佣金率：该项是从可分配佣金中取出一定比率的佣金发放给推广者的队员</span>
      </el-col>
    </el-row>

    <el-row style="background-color: #c6e2ff; border-radius: 10px; padding: 15px; margin-top: 15px;">
      <el-col :span="24" style="display: flex; flex-direction: column;">
        <span>佣金说明</span>
        <span>总佣金(您在聚推客最终可以提现到的佣金) = 聚推客结算的佣金 * 实际佣金率 (平台费&不提供发票费)</span>
        <span>可分配佣金(用来分配给推广者的佣金) = 总佣金 * 可分配佣金比率</span>
        <span>队员佣金(用户的直属下级的佣金) = 可分配佣金 * 队员佣金率</span>
        <span>队员给邀请人提供的佣金 = 可分配佣金 - 队员佣金</span>
        <span>-----------------------------------------------------</span>
        <span>您的平台可获取的佣金 = 总佣金 * (1-可分配佣金率)</span>
        <span>用户佣金 = 队员佣金 + 队员给邀请人提供的佣金</span>
        <span>系统默认提供一个uid等于000000的用户，所有用户的默认邀请人都为它</span>
      </el-col>
    </el-row>

    <el-row style="padding: 15px; margin-top: 15px;">
      <el-col :span="24">
        <el-form-item>
          <el-button type="primary" :loading="saveUser" @click="onSubmit('user')">保存</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  import {
    personal,
    updateUser,
  } from '@/apis/SysApi'

  export default {
    name: 'Personal',
    data() {
      return {
        user: {},
        rules: {
          email: [{
            required: true,
            message: '请输入邮箱',
            trigger: 'blur'
          }],
          apiKey: [{
            required: true,
            message: '请输入数值类型的聚推客apiKey',
            trigger: 'blur'
          }],
          pubId: [{
            required: true,
            message: '请输入聚推客punId',
            trigger: 'blur'
          }],
          appId: [{
            required: true,
            message: '请输入小程序appId',
            trigger: 'blur'
          }],
          appSecret: [{
            required: true,
            message: '请输入小程序密钥',
            trigger: 'blur'
          }],
          distRate: [{
            required: true,
            message: '请输入可分配佣金率',
            trigger: 'blur'
          }],
          teamRate: [{
            required: true,
            message: '请输入队员佣金率',
            trigger: 'blur'
          }]
        },
        saveUser: false
      }
    },
    created() {
      this.personal()
    },
    methods: {
      personal() {
        personal().then(res => {
          if (res.data) {
            this.user = res.data
          }
        })
      },
      updateUser(changeUserData) {
        this.saveUser = true
        updateUser(changeUserData).then(res => {
          if (res.data > 0) {
            this.$message.success('修改成功')
          } else {
            this.$message.error('修改失败')
          }
          this.saveUser = false
        })
      },
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.updateUser(this.user)
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>
  .el-form-item {
    margin-bottom: 0px;
  }
</style>
